<template>
  <div>
    <p v-if="loading">Loading...</p>
    <p v-else>
      Most Star Repo is <a :href="repo.html_url">{{ repo.name }}</a>
    </p>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "App",
  data() {
    return {
      repo: {
        name: "",
        html_url: "",
      },
      loading: false,
    };
  },
  async mounted() {
    // 发送请求之前
    this.loading = true;

    const response = await axios({
      method: "GET",
      // url: "https://api.github.com/search/repositories?q=v&sort=stars",
      url: "https://api.github.com/search/repositories",
      params: {
        q: "v",
        sort: "stars",
      },
    });
    /*
    {
      config: 请求配置对象：内部包含请求的信息
      data: 响应体数据
      headers: 响应头
      request: 发送请求的xhr对象
      status: 响应状态码
      statusText: 响应状态文本
    }  
    */
    const { name, html_url } = response.data.items[0];

    this.repo = {
      name,
      html_url,
    };
    // 请求成功之后
    this.loading = false;
  },
};
</script>

<style>
</style>